<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <link rel="stylesheet" href="../../css/animate.css">
  <link rel="stylesheet" href="../../iconfont/iconfont.css">
  <link rel="stylesheet" href="../../css/mescroll.css">
  <link rel="stylesheet" href="../../css/gloab.css">
  <title>资金明细</title>
  <style>
    .form-son-input{
      line-height: 1rem;
      font-size:0.28rem;
    }
    .mescroll{
        position:fixed;
        top: 0;
        bottom: 0;
        height: auto;
        left:0;
        right:0;
    }
  </style>
</head>
<body>
  <div id="app">
    <div id="public-header" style="padding-bottom:0.8rem;">
      <div id="statusbar"></div>
      <header class="public-header">
        <div class="public-header-lf iconfont icon-fanhui" @click="javascript:api.closeWin();"></div>
        <div class="public-header-title">资金明细</div>
      </header>
      <div class="zijinmx-bar flex">
        <div class="zijinmx-bar-son F1" @click="fenrun">
          <p>分润<span v-show="num==0"></span></p>
        </div>
        <div class="zijinmx-bar-son F1" @click="redbag">
          <p>红包<span v-show="num==1"></span></p>
        </div>
        <div class="zijinmx-bar-son F1" @click="chongzhi">
          <p>充值<span v-show="num==2"></span></p>
        </div>
        <div class="zijinmx-bar-son F1" @click="tixian">
          <p>提现<span v-show="num==3"></span></p>
        </div>
        <div class="zijinmx-bar-son F1" @click="jifen">
          <p>积分<span v-show="num==4"></span></p>
        </div>
      </div>
    </div>
    <div class="zijinmx-body" style="margin-top:-0.8rem;">
      <!-- 充值 -->
      <div class="zijinmx-body-cz flex" v-for="(item,index) in rechargedata" v-if="chong">
          <div class="zijinmx-body-cz-lf F1"><img src="../../image/personal/icon4.png" alt=""></div>
          <div class="zijinmx-body-cz-ct F4">
            <p>充值</p>
            <span>{{item.createtime}}</span>
          </div>
          <div class="zijinmx-body-cz-rt F2">￥{{item.payprice}}</div>
      </div>

      <!-- 分润 -->
      <div class="zijinmx-body-fr" v-for="(item,index) in fenrundata" v-if="run">
        <div class="zijinmx-body-fr-head">时间：{{item.createtime}}</div>
        <div class="zijinmx-body-fr-content flex">
          <div class="zijinmx-body-cz-lf F1"><img :src="apiUrl+item.avatar" alt=""></div>
          <div class="zijinmx-body-cz-ct F4">
            <p>{{item.name}}<span style="color:#ff4b4b;font-size:0.24rem;">&nbsp;[{{item.statuss}}]</span></p>
            <span style="color:#515355;">ID：{{item.id}}</span>
          </div>
          <div class="zijinmx-body-cz-rt F2" style="margin-top:-0.08rem;">
            <p style="color:#55a0f8;">￥{{item.payprice}}</p>
            <span style="font-size:0.24rem;color:#bfbfbf;">上头条三天</span>
          </div>
        </div>
      </div>

      <!-- 红包 -->
      <div class="zijinmx-body-fr" v-for="(item,index) in redbagdata" v-if="hong">
        <div class="flex" style="padding-top:0.24rem;">
          <div class="zijinmx-body-cz-lf F1"><img :src="apiUrl+item.avatar" alt=""></div>
          <div class="zijinmx-body-cz-ct F4">
            <p>{{item.name}}</p>
            <div class="zijinmx-body-fr-head">时间：{{item.createtime}}</div>
          </div>
          <div class="zijinmx-body-cz-rt F2" style="margin-top:0;">￥{{item.payprice}}</div>
        </div>
      </div>

      <!--  提现-->
      <div class="zijinmx-body-fr" v-for="(item,index) in cashdata" v-if="ti">
        <div class="zijinmx-body-fr-head">时间：{{item.createtime}}</div>
        <div class="flex" style="padding-top:0.24rem;">
          <div class="zijinmx-body-cz-ct F2">
            <p style="color:#ff4d4d;">-{{item.payprice}}</p>
            <span style="color:#949b9f;"><span style="color:#3f4143;">事由：</span>{{item.content}}</span>
          </div>
          <div class="zijinmx-body-cz-rt F1" style="margin-top:0;color:#606162;">余额: ￥{{item.price}}</div>
        </div>
      </div>

      <!-- 积分 -->
      <div class="zijinmx-body-fr" v-for="(item,index) in integraldata" v-if="ji">
        <div class="zijinmx-body-fr-head">时间：{{item.createtime}}</div>
        <div class="flex" style="padding-top:0.24rem;">
          <div class="zijinmx-body-cz-ct F2">
            <p style="color:#ff4d4d;">{{item.payprice}}</p>
            <span style="color:#949b9f;"><span style="color:#3f4143;">事由：</span>{{item.content}}</span>
          </div>
          <div class="zijinmx-body-cz-rt F1" style="margin-top:0;color:#606162;">余额: ￥{{item.integral}}</div>
        </div>
      </div>
    </div>
  </div>
  <div class="public-progress" style="z-index:9;">
   <img src="../../icon/icon150x150.png" alt="" class="animated infinite flash" style="width:200px;height:200px;display:block;margin:200px auto;">
  </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/mescroll.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/jsencrypt.js"></script>
<script src="../../script/fastclick.js"></script>

<script>
var vm;
var mescroll;
apiready=function(){
  api.removeLaunchView();
  setBar("statusbar");
  setFont(750);
  startVue();
  $(".public-progress").fadeOut(1000);
  setTimeout(function(){
    $(".public-progress").css({"display":"none"});
  },2000);
}
function startVue(){
  vm = new Vue({
    el:"#app",
    data:{
      gdtt:['100','1000','5000','10000','20000','50000'],
      num:0,
      chong:false,
      run:true,
      hong:false,
      ti:false,
      ji:false,
      rechargedata:[],
      cashdata:[],
      integraldata:[],
      redbagdata:[],
      fenrundata:[],
      type:'',
    },
    created:function(){
        this.firstfenrun();
    },
    // mounted:function(){
    //   this.initMescroll();
    //   var top = $("#public-header").outerHeight(true)+160;
    //   $("#mescroll").css({"top":top+"px"});
    // },
    methods:{
      // more:function(obj){
      //   if(obj.num){
      //     vm.page++;
      //     vm.getJafenData();
      //   }else{
      //     vm.page=0;
      //     vm.getJafenData();
      //   }
      // },
      firstfenrun:function(){
        api.ajax({
            url: apiUrl+'/api/Allmoney/allmoneyselect',
            method: 'post',
            data: {
                values: {
                  uid: post_en($api.getStorage('uid')),
                  type:5,
                },
            }
        },function(ret, err){
            if (ret.status) {
                vm.fenrundata=ret.data;
            } else {
                vm.fenrundata=ret.data;
            }
        });
      },
      //页面切换
      fenrun:function(){
        vm.num=0;
        vm.chong=false;
        vm.run=true;
        vm.hong=false;
        vm.ti=false;
        vm.ji=false;
        vm.type=5;
        api.ajax({
            url: apiUrl+'/api/Allmoney/allmoneyselect',
            method: 'post',
            data: {
                values: {
                  uid: post_en($api.getStorage('uid')),
                  type:vm.type,
                },
            }
        },function(ret, err){
            if (ret.status) {
                vm.fenrundata=ret.data;
            } else {
                vm.fenrundata=ret.data;
            }
        });
      },
      redbag:function(){
        vm.num=1;
        vm.chong=false;
        vm.run=false;
        vm.hong=true;
        vm.ti=false;
        vm.ji=false;
        vm.type=1;
        api.ajax({
            url: apiUrl+'/api/Allmoney/allmoneyselect',
            method: 'post',
            data: {
                values: {
                  uid: post_en($api.getStorage('uid')),
                  type:vm.type,
                },
            }
        },function(ret, err){
            if (ret.status) {
                vm.redbagdata=ret.data;
            } else {
                vm.redbagdata=ret.data;
            }
        });
      },
      chongzhi:function(){
        vm.num=2;
        vm.chong=true;
        vm.run=false;
        vm.hong=false;
        vm.ti=false;
        vm.ji=false;
        vm.type=2;
        api.ajax({
            url: apiUrl+'/api/Allmoney/allmoneyselect',
            method: 'post',
            data: {
                values: {
                  uid: post_en($api.getStorage('uid')),
                  type:vm.type,
                },
            }
        },function(ret, err){
            if (ret.status) {
                vm.rechargedata=ret.data;
            } else {
                vm.rechargedata=ret.data;
            }
        });
      },
      tixian:function(){
        vm.num=3;
        vm.chong=false;
        vm.run=false;
        vm.hong=false;
        vm.ti=true;
        vm.ji=false;
        vm.type=3;
        api.ajax({
            url: apiUrl+'/api/Allmoney/allmoneyselect',
            method: 'post',
            data: {
                values: {
                    uid: post_en($api.getStorage('uid')),
                    type:vm.type,
                },
            }
        },function(ret, err){
            if (ret.status) {
                vm.cashdata=ret.data;
            }
            // setTimeout(function() {
            //     self.mescroll.endSuccess();
            //     self.mescroll.endUpScroll(false);
            //   }, 500)
        });
      },
      jifen:function(){
        vm.num=4;
        vm.chong=false;
        vm.run=false;
        vm.hong=false;
        vm.ti=false;
        vm.ji=true;
        vm.type=4;
        api.ajax({
            url: apiUrl+'/api/Allmoney/allmoneyselect',
            method: 'post',
            data: {
                values: {
                  uid: post_en($api.getStorage('uid')),
                  type:vm.type,
                },
            }
        },function(ret, err){
            if (ret.status) {
                vm.integraldata=ret.data;
            } else {
                vm.integraldata=ret.data;
            }
        });
      },
      // initMescroll:function(){
      //   this.mescroll = new MeScroll("mescroll", {
      //     down:{
      //       use:true,
      //       auto:true,
      //       autoShowLoading:true,
      //       callback: this.more, //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
      //     },
      //     up:{
      //       use:true,
      //       auto:false,
      //       lazyLoad: {
      //         use: true, // 是否开启懒加载,默认false
      //         attr: 'imgurl', // 网络地址的属性名 (图片加载成功会移除该属性): <img imgurl='网络图  src='占位图''/>
      //         showClass: 'mescroll-lazy-in', // 图片加载成功的显示动画: 渐变显示,参见mescroll.css
      //         delay: 500, // 列表滚动的过程中每500ms检查一次图片是否在可视区域,如果在可视区域则加载图片
      //         offset: 200 // 超出可视区域200px的图片仍可触发懒加载,目的是提前加载部分图片
      //       },
      //       callback: this.more, //上拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
      //     }
      //   })
      // },
    }
  })
}

</script>
</html>
